import * as echarts from '../../../../utils/echarts.js';

let chart = null;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [{
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      axisTick: {
        //y轴刻度线
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#fff',
        // interval: 10
      },

    }],
    yAxis: [{
      type: 'category',
      // "boundaryGap": true,
      axisTick: {
        show: false
      },
      data: ['护理', '烫发', '染发', '剪发', '洗发', '洗剪吹'],
      axisLine: {
        show: false,
        lineStyle: {
          color: '#999',
        }
      },
      axisLabel: {
        color: '#666',
        // interval: 0 
      },
    }],
    series: [
      {
        // name: '正面',
        type: 'bar',
        // stack: '总量',
        label: {
          normal: {
            // show: true,
            // position: 'top',
            formatter: '{c}%'
          },
          show: true,
          // position:'right'
        },
        data: ['23.0', '23.0', '24.0', '25.0', '2.0', '3.0'],
        barWidth: 6, // 柱状宽度
        itemStyle: {
          normal: {
            barBorderRadius: 2,
            // color: '#8DDDAE',
            color: function (params) {
              var index = params.dataIndex; //得到当前数据的下标
              var colorList = ['#F5D09E', '#EF675B', '#8DDDAE', '#5F77F8', '#F2B98A', '#5FC6F8', '#ca8622', '#8A8A8A', '#8B4500', '#436EEE', '#4A4A4A', '#0000AA', '#218868', '#63B8FF', '#737373', '#7FFF00', '#8B0000', '#8B8682', '#BCD2EE', '#EEE9BF'];
              //如果数据大于了了颜色长度，则将大于部分的颜色重新再颜色list里面定义
              if (params.dataIndex >= colorList.length) {
                index = params.dataIndex - colorList.length;
              }
              //返回每个下标对应的颜色
              return colorList[index];
            },
            label: {
              show: true,
              fontSize: 12,
              color: "#292928"
            }
          }
        }
      },
    ]
  };

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () {},
      fail: function () {}
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      // console.log(chart)
    }, 2000);
  }
});